<template>
	<view class="container">
		<view class="box-user"> 
			<view class="box-image" @click="editorImage">
				<u--image radius="50%" :showLoading="true" :src="userInfo.user_pic" width="100px" height="100px"></u--image>
			</view>
			<view class="username"> {{ userInfo.username }} </view>
			<view class="nickname" @click="personalSettings"> {{ userInfo.nickname || '您还未设置昵称' }} </view>
			<view class="email" @click="personalSettings"> {{ userInfo.email || '您还未设置邮箱' }} </view>
		</view>
		<view class="box-user-info">
			<view class="user-info">
				<u-cell-group>
					<u-cell isLink icon="order" title="新增分类" url="/pages/sort/sortNew" :titleStyle="{'color': '#666'}" :iconStyle="{'font-size': '22px','color': '#666'}" :rightIconStyle="{'font-size': '20px','color': '#666'}"></u-cell>
					<u-cell isLink icon="file-text" title="新增内容" url="/pages/content/contentNew" :titleStyle="{'color': '#666'}" :iconStyle="{'font-size': '22px','color': '#666'}" :rightIconStyle="{'font-size': '20px','color': '#666'}"></u-cell>
					<u-cell isLink icon="account" title="修改头像" url="/pages/editorImage/index" :titleStyle="{'color': '#666'}" :iconStyle="{'font-size': '24px','color': '#666'}" :rightIconStyle="{'font-size': '20px','color': '#666'}"></u-cell>
					<u-cell isLink icon="lock" title="修改密码" url="/pages/editorPassword/index" :titleStyle="{'color': '#666'}" :iconStyle="{'font-size': '24px','color': '#666'}" :rightIconStyle="{'font-size': '20px','color': '#666'}"></u-cell>
					<u-cell isLink icon="setting" title="个人设置" url="/pages/personalSettings/index" :titleStyle="{'color': '#666'}" :iconStyle="{'font-size': '22px','color': '#666'}" :rightIconStyle="{'font-size': '20px','color': '#666'}"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="box-quit-login">
			<u-button color="#c00000" @click="quitLogin">退出登录</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { userinfoLode } from "@/api/getList.js";
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onShow(){
			this.getUserinfo();
		},
		created() {
			
		},
		methods: {
			personalSettings(){
				uni.navigateTo({ url: '/pages/personalSettings/index' });
			},
			editorImage(){
				uni.navigateTo({ url: '/pages/editorImage/index' })
			},
			async getUserinfo(){
				const { data } = await userinfoLode({});
				this.userInfo = data;
			},
			quitLogin(){
				this.$refs.uToast.show({ message: '退出登录中' });
				let dateTime = setTimeout(() => {
					uni.removeStorageSync('token');
					uni.reLaunch({ url: "/pages/login/index" });
					clearTimeout(dateTime);
				},1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		box-sizing: border-box;
		.box-user {
			background-color: #fff;
			padding: 100rpx 0;
			.box-image {
				width: 100%;
				display: flex;
				justify-content: center;
			}
			.nickname,.email,.username {
				color: #666;
				display: flex;
				justify-content: center;
			}
			.username {
				margin-top: 40rpx;
			}
			.nickname {
				margin-top: 20rpx;
			}
			.email {
				margin-top: 20rpx;
			}
		}
		.box-user-info {
			margin-top: 30rpx;
			box-sizing: border-box;
			width: 100%;
			margin: 30rpx 0;
			padding: 0 20rpx;
			.user-info {
				border-radius: 8rpx;
				background-color: #fff;
			}
		}
		.box-quit-login {
			box-sizing: border-box;
			padding: 40rpx 250rpx 100rpx 250rpx;
		}
	}
</style>
